import React from "react";

// 函数组件
function Son(props) {
  // console.log(props);
  // props.count = 100  // 改不了，官方将其定义为只读属性
  const msg = '来自子组件的信息'
  const handle = () => {
    props.getMsg(msg)
  }
  return (
    <div>
      <h3>子组件 -- {props.count}</h3>
      <button onClick={handle}>子</button>
    </div>
  )
}

// 类组件
class App extends React.Component {
  constructor() {
    super();

    this.state = { // 组件的状态
      count: 0
    }
  }

  add() {
    // this.state.count++
    this.setState({
      count: this.state.count + 1
    })
  }

  getMsg(msg) {
    console.log(msg);
  }

  render() {
    return (
      <>
        <button onClick={this.add.bind(this)}>{this.state.count}</button>
        <Son count={this.state.count} getMsg={this.getMsg} />
      </>
    )
  }
  
}

export default App;